import React, { FC } from 'react';
import { Container, Draggable } from 'react-smooth-dnd';

let items: { id: number; title: number }[] = [];
for (let i = 0; i < 100; i++) {
  items.push({
    id: i,
    title: i,
  });
}

const Index: FC = () => {
  const applyDrag = (arr, dragResult) => {
    const { removedIndex, addedIndex, payload } = dragResult;
    if (removedIndex === null && addedIndex === null) return arr;

    const result = [...arr];
    let itemToAdd = payload;

    if (removedIndex !== null) {
      itemToAdd = result.splice(removedIndex, 1)[0];
    }

    if (addedIndex !== null) {
      result.splice(addedIndex, 0, itemToAdd);
    }

    return result;
  };
  const onDrop = (e) => {
    console.log(e);

    console.log(applyDrag(items, e));
  };
  return (
    <div className="ReactSmoothDnd">
      <Container
        onDrop={onDrop}
        style={{
          display: 'flex',
          flexWrap: 'wrap',
        }}
      >
        {items.map((item) => {
          return (
            <Draggable key={item.id} className="item">
              {item.title}
            </Draggable>
          );
        })}
      </Container>
    </div>
  );
};

export default Index;
